<template>
  <a-card :bordered="false">
    <div style="margin: 10px">{{ $t('商户编码') }}：{{ shCode }}</div>
    <div style="margin: 10px">{{ $t('门店编码') }}：{{ info.code }}</div>
    <div style="margin: 10px">{{ $t('卡店码') }}：{{ info.cardCode }}</div>
    <div style="margin: 10px">{{ $t('门店名称') }}：{{ info.name }}</div>
    <div style="margin: 10px">{{ $t('系统类型') }}：{{ info.type_dictText }}</div>
    <div style="margin: 10px">
      {{ $t('通讯秘钥') }}：{{ info.apiKey }}
      <a-button @click="copy" style="background-color: #f96455; border-color: #f96455; color: #ffffff">{{
        $t('复制')
      }}</a-button>
    </div>
    <div style="margin: 10px; display: flex">
      {{ $t('门店Logo') }}：<j-upload
        v-model="info.shopPicture"

        fileType="image"
        :text="$t('选择')"
        :count="1"
        :multiple="false"
        @change="setLogo"
      ></j-upload>
    </div>
    <div style="margin: 10px">
      {{ $t('客服姓名') }}：<a-input v-model="info.customerServiceName" style="width: 200px"></a-input>
    </div>
    <div style="margin: 10px">
      {{ $t('客服电话') }}：<a-input v-model="info.customerServicePhone" style="width: 200px"></a-input>
    </div>
    <div style="margin: 10px">
      {{ $t('官网地址') }}：<a-input v-model="info.officialSite" style="width: 200px"></a-input>
    </div>
    <div style="margin: 10px">
      <a-button v-has="'ShopManageList:edit'" @click="saveInfo" style="background-color: #f96455; border-color: #f96455; color: #ffffff">{{
        $t('保存')
      }}</a-button>
    </div>
  </a-card>
</template>

<script>
import '@/assets/less/TableExpand.less'
import Vue from 'vue'
import { getAction, putAction } from '@/api/manage'

export default {
  name: 'BisShopList',
  data() {
    return {
      description: '门店管理页面',
      info: {},
      shCode: '',
    }
  },
  created() {
    this.getList()
  },
  computed: {
    importExcelUrl: function () {
      return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`
    },
    tokenHeader() {
      let head = { 'X-Access-Token': Vue.ls.get(ACCESS_TOKEN) }
      let tenantid = Vue.ls.get(TENANT_ID)
      if (tenantid) {
        head['tenant-id'] = tenantid
      }
      return head
    },
  },
  methods: {
    saveInfo() {
      putAction('/shop/bisShop/edit', {
        id: this.info.id,
        tenantId: this.info.tenantId,
        customerServiceName: this.info.customerServiceName,
        customerServicePhone: this.info.customerServicePhone,
        officialSite: this.info.officialSite,
      }).then((res) => {
        if(res.success){
          this.$message.success(res.message)
        }else{
          this.$message.error(res.message)
        }
      })
    },
    setLogo(info) {
      putAction('/shop/bisShop/edit', { id: this.info.id, tenantId: this.info.tenantId, shopPicture: info }).then(
        (res) => {}
      )
    },
    getList() {
      getAction('/shop/bisShop/list', {}).then((res) => {
        if (res.success) {
          this.info = res.result.records[0]
          if (this.info.merchantCode) {
            this.shCode = this.info.merchantCode
          } else {
            this.shCode = window.location.host.split('.')[0] || 'dev'
          }
        } else {
          this.$message.warning(res.message)
        }
      })
    },
    initDictConfig() {},
    copy() {
      let cInput = document.createElement('input')
      cInput.value = this.info.apiKey
      document.body.appendChild(cInput)
      cInput.select()
      document.execCommand('copy')
      if (document.execCommand('copy')) {
        this.$message.success(this.$t('复制成功'))
      }
    },
  },
}
</script>
<style scoped>
@import '~@assets/less/common.less';
</style>